<template>
  <!--报到-完成报到-患者信息-->
  <div class="report-result-info" v-if="finishReport&&(finishReport.length)" :key="widgetKey">
    <div class="swiper-container-wrapper" v-swiperGap="true">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in finishReport" :key="`${item.signId}_${index}`">
            <div class="swiper-slide-inside" :class="patientClassName(item)">
              <div class="top">
                <template v-for="itemKey in fieldList('top')">
                  <div
                      class="top-item"
                      :class="fieldClassName(itemKey.value)"
                      v-if="fieldShow('top',(itemKey.value))"
                  >
                    <div class="title">
                      <template v-if="(itemKey.value)==='orderNo'">
                        {{ (item[itemKey.value]) || '\u00a0' }}
                      </template>
                      <template v-else>
                        {{ itemKey.label || '\u00a0' }}
                      </template>
                    </div>
                    <div class="content">
                      <template v-if="(itemKey.value)==='registerNameKey'">
                        {{ item[itemKey.value] || (item.registerObjName) || '\u00a0' }}
                      </template>
                      <template v-else-if="(itemKey.value)==='roomKey'">
                        {{ item[itemKey.value] || (item.treatmentRoomName) || '\u00a0' }}
                      </template>
                      <template v-else-if="(itemKey.value)==='orderNo'">
                        <span class="patient_status">
                          {{ patientStatus(item) }}
                        </span>
                      </template>
                      <template v-else>
                        {{ (item[itemKey.value]) || '\u00a0' }}
                      </template>
                    </div>
                  </div>
                </template>
              </div>
              <div class="bottom">
                <template v-for="itemKey in fieldList('bottom')">
                  <div
                      class="item"
                      :class="fieldClassName(itemKey.value)"
                      v-if="fieldShow('bottom',(itemKey.value))"
                  >
                    <div class="title">
                      <template v-if="(itemKey.value)!=='print'">
                        {{ itemKey.label || '\u00a0' }}
                      </template>

                    </div>
                    <div class="content">
                      <template v-if="(itemKey.value)==='patientCardNoHide'">
                        {{ (item[itemKey.value]) || (item.patientCardNo) || '\u00a0' }}
                      </template>
                      <template v-else-if="(itemKey.value)==='print'">
                        <div @click="handlePrint(item)">打印小票</div>
                      </template>
                      <template v-else>
                        {{ (item[itemKey.value]) || '\u00a0' }}
                      </template>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <el-button class="button-area" type="primary" @click="handleClick" v-if="false">动态添加数据</el-button>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid';
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "ReportFinish",

  componentName: "ReportFinish",

  props: {
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    }
  },

  data() {
    return {
      status: true,
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
    }
  },

  computed: {
    // 获取对应的中文名称
    fieldName() {
      return function (row) {
        switch (row) {
          case 'orderNo':
            return '排序号'
          case 'countNum':
            return '等待人数'
          case 'registerNameKey':
            return '号别'
          case 'roomKey':
            return '诊室'
          case 'deptName':
            return '科室'
          case 'patientCardNoHide':
            return '卡号'
          case 'patientName':
            return '姓名'
          case 'projectName':
            return '检查项'
          case 'print':
            return '打印小票'
        }
      }
    },

    // 获取对应的className
    fieldClassName() {
      return function (row) {
        switch (row) {
          case 'orderNo':
          case 'countNum':
          case 'roomKey':
          case 'registerNameKey':
            return `patient-${row}`;
          case 'deptName':
            return `dept-area`;
          case 'patientCardNoHide':
            return `card-area`;
          case 'patientName':
            return `name-area`;
          case 'projectName':
            return `project-name`;
          case 'print':
            return `print-area`;
        }
      }
    },

    // 显示字段是否显示
    fieldShow() {
      return function (type, row) {
        let topCheckListInfo = ['orderNo', 'countNum', 'registerNameKey', 'roomKey'];
        let bottomCheckListInfo = ['deptName', 'patientCardNoHide', 'patientName'];
        let {topCheckList = topCheckListInfo, bottomCheckList = bottomCheckListInfo} = (this.optionsInfo);
        switch (type) {
          case 'top':
            return topCheckList.includes(row)
          case 'bottom':
            return bottomCheckList.includes(row)
        }
      }
    },

    // 显示字段对象
    fieldList() {
      return function (type) {
        let {patientShowFields = types['patientFields']} = (this.optionsInfo);
        switch (type) {
          case 'top':
            return patientShowFields['topFields']
          case 'bottom':
            return patientShowFields['bottomFields']
        }
      }
    },

    // 完成报到列表
    finishReport() {
      this.widgetKey = uuid();
      let devType = (this.devType);
      let reportPatientInfo = this.$store.getters['getReportPatientInfo'];
      if (devType) {
        let finishReportList = (reportPatientInfo.apiData.signList)
        if (finishReportList && !!(finishReportList.length)) {
          return finishReportList;
        } else {
          return []
        }
      } else {
        let finishReportList = (reportPatientInfo.mockData.signList)
        if (finishReportList && !!(finishReportList.length)) {
          return finishReportList;
        } else {
          return []
        }
      }
    },

    //状态-中文-分诊
    patientStatus() {
      return function (row) {
        let type = parseInt(row.patientDataStatus);
        let hasTriage = row.hasTriage;
        if (!hasTriage) {
          return '未分诊'
        }
        switch (type) {
          case 0:
            return '已报到'
          case 1:
            return '已诊结'
        }
      }
    },

    //患者状态-样式
    patientClassName() {
      return function (row) {
        let type = parseInt(row.patientDataStatus);
        switch (type) {
          case 0:
            return 'patient_register'
          case 1:
            return 'patient_no_register'
        }
      }
    },
  },

  mounted() {
  },

  methods: {
    handleClick(val) {
      let list = [
        {
          "queuingId": "17616129817200824321",
          "signId": "1766129817142104066",
          "countNum": "10",
          "orderNo": "A800",
          "orderPrefix": "",
          "orderScore": "137376000213737137000",
          "patientName": "谢道韫",
          "patientIdNo": "xy10087253",
          "patientCardNo": "xy10087253",
          "patientCardNoHide": "110******112",
          "registerObjId": 18,
          "registerObjName": "普通号别-普通号别",
          "registerObjType": "1",
          "deptId": 3,
          "deptName": "神经外科",
          "workerName": "",
          "ruleId": 86,
          "ruleType": "0",
          "hasTriage": true,
          "workerId": null,
          "sex": "1",
          "age": 64,
          "ageType": "2",
          "treatmentRoomName": "诊室名称",
          "treatmentRoomShortName": "诊室简称"
        },
        {
          "queuingId": "1766129817200824321",
          "signId": "1766129817142104066",
          "countNum": "0",
          "orderNo": "A801",
          "orderPrefix": "",
          "orderScore": "137376000213737137000",
          "patientName": "桓温",
          "patientIdNo": "xy10087253",
          "patientCardNo": "xy10087253",
          "patientCardNoHide": "110******112",
          "registerObjId": 18,
          "registerObjName": "普通号别-普通号别",
          "registerObjType": "1",
          "deptId": 3,
          "deptName": "神经外科",
          "workerName": "",
          "ruleId": 86,
          "ruleType": "0",
          "hasTriage": true,
          "workerId": null,
          "sex": "1",
          "age": 64,
          "ageType": "2",
          "treatmentRoomName": "诊室名称",
          "treatmentRoomShortName": "诊室简称"
        },
        {
          "queuingId": "17661298172100824321",
          "signId": "1766129817142104066",
          "countNum": "0",
          "orderNo": "800",
          "orderPrefix": "",
          "orderScore": "137376000213737137000",
          "patientName": "欧阳新",
          "patientIdNo": "xy10087253",
          "patientCardNo": "xy10087253",
          "patientCardNoHide": "110******112",
          "registerObjId": 18,
          "registerObjName": "普通号别-普通号别-普通号别-普通号别",
          "registerObjType": "1",
          "deptId": 3,
          "deptName": "神经外科",
          "workerName": "",
          "ruleId": 86,
          "ruleType": "0",
          "hasTriage": true,
          "workerId": null,
          "sex": "1",
          "age": 64,
          "ageType": "2",
          "treatmentRoomName": "诊室名称",
          "treatmentRoomShortName": "诊室简称"
        },
      ];
      this.$store.state.reportPatientInfo.mockData.signList = list
    },

    //  打印小票
    handlePrint(row) {
      // 调用父级的API
      console.log(row)
      this.$emit('handleSignPrint', row);
    }
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = (val.options.config)
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
  },

};
</script>

<style lang="scss" scoped>
.report-result-info {
  //overflow: hidden;
  width: calc(100%);
  border-radius: 30px;
  box-sizing: border-box;
  margin: 30px 0 10px 0;
  position: relative;

  .swiper-container {
    height: 100%;
    display: flex;
    align-self: center;
    align-items: center;
    text-align: center;
    overflow: visible;
    justify-content: center;
    margin-bottom: 60px;

    :deep(.swiper-slide-inside) {
      box-sizing: border-box !important;
      padding: 0 40px;
      color: rgba(0, 89, 179, 1);

      .top {
        display: flex;
        flex-direction: column;
        font-size: 80px;
        line-height: 118px;
        padding: 28px 0 24px 0;
        justify-content: space-between;
        border-bottom: 4px #DDDDDD solid;

        .top-item {
          font-weight: bold;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;

          .title {
            min-width: 260px;
            flex-basis: 260px;
            width: 260px;
            text-align: left;
            @include singleEllipsis(260px);
          }

          .content {
            text-align: right;
            @include singleEllipsis(calc(100% - 260px));

            .patient_status {
              padding: 12px 26px;
              font-size: 54px;
              color: #FFFFFF;
              background: #0059B3;
              border-radius: 20px;
            }
          }
        }

        .patient-orderNo {
          line-height: 116px;
          font-size: 80px;
        }

        .patient-countNum {
          font-size: 54px;
          line-height: 82px;
        }

        .patient-registerNameKey,
        .patient-roomKey {
          font-size: 54px;
          line-height: 82px;
        }
      }

      .bottom {
        margin-top: 18px;
        margin-bottom: 10px;

        .item {
          display: flex;
          font-size: 50px;
          line-height: 1.56;
          justify-content: space-between;

          .title {
            flex-shrink: 0;
            min-width: 200px;
            text-align: left;
            font-size: 52px;
            font-weight: 400;
            align-self: center;
            color: rgba(102, 102, 102, 1);
          }

          .content {
            color: rgba(51, 51, 51, 1);
            text-align: right;
            @include fontWeight();
          }
        }

        .print-area {
          .content {
            border: 1px #dcdee2 solid;
            background: #2d8cf0;
            border-radius: 100px;
            color: white;
            padding: 6px 48px;
            font-size: 44px;
            display: flex;
            align-self: center;
            line-height: initial;
            overflow: hidden;
            cursor: pointer;
          }
        }
      }
    }

    :deep(.patient_no_register) {
      color: #666666;

      .top .top-item .content .patient_status {
        color: #FFFFFF;
        background: #666666;
      }

    }

  }

  .swiper-container-empty {
    height: 100%;
    display: flex;
    align-self: center;
    align-items: center;
    text-align: center;
    justify-content: center;
  }

  .button-area {
    position: absolute;
    top: 0;
    z-index: 99999;
  }
}


.swiper-container-wrapper {
  width: 100%;
  transform-style: preserve-3d;

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    width: 80%;
    background: white;
    border-radius: 20px;
  }

  .swiper-slide-prev {
    transform: scale(0.9) translateZ(-100px);
    height: 100% !important;
  }

  .swiper-slide-next {
    transform: scale(0.9) translateZ(-100px);
    height: 100% !important;

  }

  .swiper-slide-active {
    width: 78%;
    height: 100% !important;
    transform: scale(1) translateZ(100000px);
    /* 创建立体效果 */
    box-shadow: rgba(0, 0, 0, 0.19) 0 10px 10px, rgba(0, 0, 0, 0.23) 0 6px 6px;;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  :deep(.swiper-pagination) {
    width: 100%;
    bottom: -62px;
    z-index: 9999;
    font-size: 44px;
    color: #ed4014;

    &::before {
      content: '已报到号别';
    }

    .swiper-pagination-bullet {
      width: 26px;
      height: 26px;
      margin: 0 12px;
    }
  }
}
</style>